/* 单附件 */
<template>
  <div class="file-config">
    <je-form-item label="允许上传类型" name="allow">
      <je-input v-model:value="formState.allow" placeholder="如：jpg,gif(空代表不限制)" />
    </je-form-item>

    <je-form-item label="禁止上传类型" name="notallow">
      <je-input v-model:value="formState.notallow" placeholder="如：jpg,gif(空代表不禁止)" />
    </je-form-item>

    <je-form-item label="上传文件大小" name="fileSize">
      <je-input-number
        v-model:value="formState.fileSize"
        addon-after="M"
        style="width: 100%"
        :min="0"
      />
    </je-form-item>
  </div>
</template>
<script>
  import { defineComponent, reactive, watch } from 'vue';
  import { Form, Input, InputNumber } from '@jecloud/ui';
  import { decode } from '@jecloud/utils';
  import { useInjectOtherCOnfig } from '../context';

  export default defineComponent({
    name: 'FileConfig',
    components: {
      JeFormItem: Form.Item,
      JeInput: Input,
      JeInputNumber: InputNumber,
    },
    props: {
      otherConfig: {
        type: String,
        default: '',
      },
    },
    setup(props, { expose }) {
      const parentContext = useInjectOtherCOnfig();
      const config = (props.otherConfig && decode(props.otherConfig ?? '{}')) ?? {};
      const formState = reactive({
        allow: config.allow || '', //允许上传类型
        notallow: config.notallow || '', //禁止上传类型
        fileSize: config.fileSize || '', //上传文件大小
      });

      watch(
        () => formState,
        () => {
          parentContext.setConfig(formState);
        },
        { deep: true },
      );

      //暴露表单值用于父组件赋值
      expose({
        formState,
      });

      return { formState };
    },
  });
</script>
<style lang="less" scoped></style>
